<template>
	<view class="container">
		<carHeader style="padding:10rpx;" :title="'详情'"></carHeader>

		<view class="repairInfo">
			<view class="one">
				<text>维修信息</text>
			</view>
			<view class="info">
				<text>维修单号：{{form.repairOrderNo}}</text>
			</view>
			<view class="info">
				<text>车主姓名：{{form.ownName}}</text>
			</view>
			<view class="info">
				<text>联系方式：{{form.ownPhone}}</text>
				<uni-icons type="phone-filled" size="20" color="#3082FB" style="float: right;margin-right: 20px;">
				</uni-icons>
			</view>
			<view class="info">
				<text>维修方式：{{form.bookingType}}</text>
			</view>
			<view class="info">
				<text>取车位置：{{form.address}}</text>
				<uni-icons type="paperplane-filled" size="20" color="#3082FB" style="float: right;margin-right: 20px;">
				</uni-icons>
			</view>
			<view class="info">
				<text>预约日期：{{form.bookingTime}}</text>
			</view>
			<view class="info">
				<text>提交日期：{{form.bookingEndtime}}</text>
			</view>
			<view class="info">
				<text v-if="isShow">到场日期：{{form.comeTime}}</text>
			</view>

		</view>

		<view class="carInfo">
			<view class="one">
				<text>车辆信息</text>
			</view>
			<view class="info">
				<text>车辆类型：{{form.remark}}</text>
			</view>
			<view class="info">
				<text>车牌号：{{form.carCard}}</text>
			</view>
			<view class="info">
				<text>整车照片：\n</text>
				<image :src="form.allPhoto"></image>
			</view>
			<view class="info">
				<text>维修部位照片：\n</text>
				<view style="display: inline-block;">
					<image :src="form.partPhoto"></image>
				</view>

			</view>

		</view>

		<view class="btn">
			<u-button @click="dialogToggle('info')" :disabled="isVerified" type="primary"
				:color="isVerified ? '#808080' : '#0662E6'" shape="circle">
				{{isVerified ? '已到场' : '确认到场'}}
			</u-button>
			<!-- <view v-else>已核销</view> -->
		</view>
	</view>
</template>

<script>
	import {
		data
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				wxList: [],
				form: {

				},
				carForm: {

				},
				msgType: "info",
				isVerified: false,
				isShow: false,
				id: null,
			};
		},

		onLoad(options) {
			this.id = options.id;
			// console.log("id:" + this.id)
			// console.log(this.id)
			// 在页面加载时调用函数执行网络请求  
			this.fetchData();
			this.daochang();
		},

		methods: {
			daochang() {
				console.log("到场信息")
				// console.log(this.form);
			},
			fetchData() {
				uni.request({
					url: 'http://localhost:8080/carShopService/booking/list2', // 示例API地址  
					data: {
						repairOrderNo: this.id
					},
					method: 'GET', // 请求方式  
					success: (res) => {
						// 请求成功时的回调函数  
						// console.log(res.data.rows);
						// console.log('11');
						console.log(res)
						this.wxList = res.data.rows;
						this.form = this.wxList[0];
						console.log("form信息")
						console.log(this.form.repairStatus);
						if (this.form.repairStatus == "进行中") {
							this.isVerified = false
						} else {
							this.isVerified = true
						}
					},
					fail: (err) => {
						// 请求失败时的回调函数  
						console.error('请求发生错误:', errs);
					}
				});

			},
			dialogToggle(type) {
				this.msgType = type
				// console.log(type);
				this.isVerified = true;
				this.isShow = true;
				const now = new Date();
				this.form.comeTime = now.toLocaleString();
				// console.log(this.isShow);
				// console.log(this.form.comeTime);
				// console.log(this.form.repairStatus)
				if (this.form.repairStatus == "进行中") {
					uni.request({
						url: 'http://localhost:8080/carShopService/booking/updatestaus',
						method: 'POST',
						data: {
							bookingId: this.id,
							repairStatus: '已完成'
						},
						success: (res) => {
							console.log(res)
							if (res.data.code == 200) {
								uni.navigateBack()
							}
						}
					})

				}
			},
		}
	}
</script>

<style lang="scss">
	.repairInfo {
		background-color: white;
		height: 650rpx;
		width: 95%;
		position: absolute;
		top: 150rpx;
		left: 20rpx;
		border-radius: 20rpx;
		z-index: 1;

		.one {
			padding: 20rpx 30rpx;
			border-bottom: 5px solid #F9F9F9;
		}

		.info {
			margin: 30rpx 30rpx;
			font-size: 13px;
		}
	}

	.carInfo {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 460rpx;
		background-color: white;
		height: 800rpx;
		width: 95%;
		// position: absolute;
		// top: 700rpx;
		// left: 20rpx;
		border-radius: 20rpx;
		z-index: 1;

		.one {
			padding: 20rpx 30rpx;
			border-bottom: 5px solid #F9F9F9;
		}

		.info {
			margin: 30rpx 30rpx;
			font-size: 13px;

			image {
				width: 80px;
				height: 80px;
				margin: 10px 10px;
			}
		}
	}

	.btn {
		margin: 40px auto;
		width: 70%;
	}
</style>